window.pageTools = window.pageTools || {};

(function(){
  function ShoppingCart(selector, eventListener){
    this.selector = $(selector); // 获取DOM节点
    this.init();
    this.eventListener = eventListener;
  }

  ShoppingCart.prototype.init = function(){
    // 创建购物车弹框的 HTML 结构
    this.cart = $('<div class="cart">\
                      <div class="cart-header">\
                        <button class="close-btn">&times;</button>\
                        <h2 class="content_header">购物车</h2>\
                      </div>\
                      <div class="cart-items">\
                        <!-- 购物车商品项 -->\
                      </div>\
                      <div class="checkout">\
                        <button class="checkout-btn">退出</button>\
                      </div>\
                    </div>');

    // 将购物车弹框添加到页面中
    this.selector.append(this.cart);

    // 添加商品列表到购物车中
    var items = ['手表', '手机', '苹果']; // 商品列表
    var cartItems = this.cart.find('.cart-items'); // 获取购物车商品列表容器
    items.forEach(function(item) {
      var listItem = $('<div class="cart-item">' + item + '</div>');
      cartItems.append(listItem);
    });

    // 单击“结账”按钮时的事件处理程序
    $('.checkout-btn').click(function() {
      this.cart.remove(); // 删除购物车弹框
      this.cart = null; // 释放内存
      this.eventListener();
    }.bind(this));

    // 单击“关闭”按钮时的事件处理程序
    $('.close-btn').click(function() {
      this.cart.remove(); // 删除购物车弹框
      this.cart = null; // 释放内存
      this.eventListener();
    }.bind(this));
  };

  pageTools.ShoppingCart = ShoppingCart; // 将定义的构造函数暴露出去
})();
